<script setup lang='ts'>
import type { ElTreeV2 } from 'element-plus'

import { useGetOrgDataSourceTree } from '@fl/api/man-api'
import { getElementLabelLine } from 'element-tree-line'
import 'element-tree-line/dist/style.css'
import { cloneDeep } from 'lodash-es'
import { h } from 'vue'

import { data } from '../organization/constant'
import Add from './add.vue'
import Show from './show.vue'

const ElementTreeLine = getElementLabelLine(h)

const { data: SourceTreeData, isLoading: SourceTreeLoading } = useGetOrgDataSourceTree()

const treeData = computed(() => SourceTreeData.value ? cloneDeep(SourceTreeData.value) : [])

const loading = computed(() => SourceTreeLoading.value)

const { path } = useRoute()

type Tree = {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTreeV2>>()

const showVisible = ref<boolean>(false)

const addVisible = ref<boolean>(false)

const showType = ref<'edit' | 'view'>('view')

const id = ref(1)

const level = ref(1)

const defaultProps = {
    children: 'childs',
    label: 'orgName',
    value: 'orgCode',
}
watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

function filterNode(value: string, data: Tree) {
    if (!value)
        return true
    return data.orgName.includes(value)
}

const isSetting = path.includes('project-setting') // 是否系统配置

const tableData = ref(data)

function showDetail(row: any) {
    console.log('🚀 ~ showDetail ~ row:', row)
    if (row.parentId) {
        level.value = 2
    }
    else {
        level.value = 1
    }
    console.log(row)
    id.value++
    showType.value = 'view'
    showVisible.value = true
}

function editDetail(row: any) {
    console.log('🚀 ~ showDetail ~ row:', row)
    if (row.parentId) {
        level.value = 2
    }
    else {
        level.value = 1
    }
    console.log(row)
    id.value++
    showType.value = 'edit'
    showVisible.value = true
}

function addLevelFirst() {
    level.value = 1
    id.value++
    addVisible.value = true
}

function addLevelSecond(row: any) {
    console.log('🚀 ~ addLevelSecond ~ row:', row)
    level.value = 2
    id.value++
    addVisible.value = true
}

function handleNodeClick(data: Tree) {
    console.log('🚀 ~ handleNodeClick ~ data:', data)
}
</script>

<template>
    <ElSkeleton v-if="loading"
                animated
    />

    <el-container v-else
                  class="h-800"
    >
        <el-aside width="300px"
                  class="p-10 mr-10 bg-#fff"
        >
            <div class="flex flex-col h-full">
                <el-input v-model="filterText"
                          placeholder="请输入关键字"
                          class="mb-10"
                          clearable
                />

                <ElTreeV2 ref="treeRef"
                          :data="treeData"
                          :props="defaultProps"
                          highlight-current
                          :filter-method="filterNode"
                          :expand-on-click-node="false"
                          :height="720"
                          @node-click="handleNodeClick"
                >
                    <template #default="{ node }">
                        <ElementTreeLine :node="node"
                                         :tree-data="treeData"
                                         :show-label-line="true"
                        />
                    </template>
                </ElTreeV2>
            </div>
        </el-aside>

        <el-main class="bg-#fff">
            <div class="flex flex-col gap-20 h-full">
                <div class="text-16 font-700">
                    项目列表
                </div>

                <div v-if="isSetting"
                     class="mb-20"
                >
                    <el-button type="primary"
                               @click="addLevelFirst"
                    >
                        新增一级项目
                    </el-button>
                </div>

                <vxe-table :column-config="{ resizable: true }"
                           :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId' }"
                           :data="tableData"
                           align="center"
                           show-overflow
                           border
                           :height="isSetting ? 630 : 700"
                >
                    <vxe-column field="name"
                                title="项目名称"
                                tree-node
                    />

                    <vxe-column v-if="isSetting"
                                field="size"
                                title="项目负责人"
                    />

                    <vxe-column v-if="!isSetting"
                                field="size"
                                title="所属公司"
                    />

                    <vxe-column v-if="!isSetting"
                                field="size"
                                title="创建时间"
                    />

                    <vxe-column v-if="!isSetting"
                                field="size"
                                title="来源"
                    />

                    <vxe-column title="操作"
                                :width="isSetting ? 300 : 100"
                    >
                        <template #default="{ row }">
                            <el-button v-if="!row.parentId && isSetting"
                                       text
                                       @click="addLevelSecond(row)"
                            >
                                添加
                            </el-button>

                            <el-button text
                                       @click="showDetail(row)"
                            >
                                详情
                            </el-button>

                            <template v-if="isSetting">
                                <el-button text
                                           @click="editDetail(row)"
                                >
                                    编辑
                                </el-button>

                                <el-button text>
                                    删除
                                </el-button>
                            </template>
                        </template>
                    </vxe-column>
                </vxe-table>
            </div>
        </el-main>
    </el-container>

    <Show :key="id"
          v-model:visible="showVisible"
          v-model:id="id"
          v-model:showType="showType"
          v-model:level="level"
    />

    <Add :key="id"
         v-model:visible="addVisible"
         v-model:id="id"
         v-model:level="level"
    />
</template>

<style lang="scss" scoped>
.el-main {
    padding: 20px;
}

:deep(.el-card__body) {
    height: 100%;
}

.el-aside {
    overflow: hidden;
}

:deep(.el-tree-node:last-child > .el-tree-node__content::before) {
    content: '';
    width: 0;
    height: 10000px;
    background-color: #e7e7e7;
    position: absolute;
    margin-left: -9px;
    bottom: 13px;
}
</style>
